<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    uniform mat4 u_PvM4;
    varying vec2 v_Pin;
    void main(){
        gl_Position = u_PvM4 * a_Position;
        v_Pin = a_Pin;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    uniform vec4 u_Color;
    varying vec2 v_Pin;
    void main(){
      vec4 rgba = texture2D(u_Sampler, v_Pin);
      if(rgba.r <= 0.1){
        gl_FragColor = vec4(0,0,0,0);
      }else{
        gl_FragColor = rgba;
      }

      //gl_FragColor = vec4(1,1,0,1);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';

    //目前完不成效果

    import ImagePoorVision from './js/ImagePoorVision.js'





    //顶点在裁剪空间的位置 = 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点的初始点位

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");


    //开始背景遮挡
    // gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);



    var imagePoorVision = new ImagePoorVision({
        gl: gl,
        canvas: canvas,
    });

    canvas.addEventListener('mousemove', function (event) {

        let { clientX } = event;
        let cX = canvas.width / 2;
        var x = (clientX - cX) / cX;
        imagePoorVision.update(x);

    })



    // const halfH = 1;
    // const ratio = canvas.width / canvas.height;
    // const halfW = halfH * ratio;
    // const [top, bottom, left, right, near, far] = [
    //     halfH, -halfH,
    //     -halfW, halfW,
    //     0, 4
    // ];
    // let eye = new Vector3(0, 0, 3);
    // let target = new Vector3(-1, 0, 0);
    // let up = new Vector3(0, 1, 0);


    // //获取正交相机
    // var camera = new OrthographicCamera(
    //     left, right, top, bottom, near, far
    // );


    // let arr1 = [
    //     0, 0.3, -0.2,
    //     -0.3, -0.3, -0.2,
    //     0.3, -0.3, -0.2
    // ];
    // let a = 0.2;
    // let arr2 = [
    //     0, 0.3, a,
    //     -0.3, -0.3, a,
    //     0.3, -0.3, a
    // ];
    // let pvM4 = getPvMatrix(eye, target);
    // let poly1 = create([1, 0, 0, 1], arr1, pvM4);
    // let poly2 = create([1, 1, 0, 1], arr2, pvM4);
    // let polys = [poly1, poly2];
    // rend();





    function rend() {
        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        polys.forEach(u => {
            u.init();
            u.draw(["TRIANGLES"]);
        })
    }

    function getPvMatrix(eye, target) {
        camera.position.copy(eye);
        camera.lookAt(target);
        //考虑到相机纯在父级属性
        //调用这个函数时会把世界坐标系写进相机的matrixWorld(世界坐标)属性里
        camera.updateWorldMatrix(true);

        return new Matrix4()
            .multiplyMatrices(
                camera.projectionMatrix,//摄像机的投影矩阵
                camera.matrixWorldInverse,//投影矩阵的逆矩阵, 因为相机移动与物体相反
            );
    }

    function create(color, arr, pvM4) {
        return new Poly({
            gl: gl,
            arr: arr,
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 }
            ],
            uniforms: {
                'u_Color': {
                    type: 'uniform4fv',
                    value: color
                },
                'u_M4_01': {
                    type: 'uniformMatrix4fv',
                    value: pvM4.elements
                }
            }
        });;
    }

</script>

</html>